<template>
  <el-form size="mini" label-position='left' label-width="120px">
    <el-form-item :required="arg.argument_opinion==='required'" :label="arg.key" v-for="(arg, index) in argument"
                  :key="arg.index">
      <el-input :placeholder="arg.description" v-model="arg.value"></el-input>
    </el-form-item>
    <el-card shadow="never">
      <template>
        <el-tag v-if="status === 200" type="success">status:{{ status }}</el-tag>
        <el-tag v-else type="danger">status:{{ status }}</el-tag>
        <el-tag>cache:{{ cache }}</el-tag>
        <el-link @click="cacheRem('remove_one')">清除缓存</el-link>
        <el-link type="danger" style="float: right" @click="cacheRem('remove_many')">清除全部缓存</el-link>
      </template>
      <json-viewer :value=data :expand-depth=3 copyable></json-viewer>
    </el-card>
    <br>
    <el-form-item style="float: right">
      <el-button @click="submit" type="primary">请求</el-button>
      <el-button @click="closeProcess">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {processHandler, cacheRemHandler} from '../../assets/js/designer'

export default {
  name: "process",
  props: {
    form: {},
    processDialogVisible: false,
  },
  created() {
    this.loadArgument()
  },
  data() {
    return {
      status: 200,
      data: {},
      argument: [],
      cache: 'false',
    }
  },
  components: {
    JsonViewer
  },
  methods: {
    closeProcess: function () {
      this.$emit("listenToChildEvent", this.processDialogVisible)
    },
    submit: function () {
      let api_name = this.form.api_name
      let argument = this.form.data.argument
      let filter = {}
      for (let i = 0; i < argument.length; i++) {
        if (argument[i].argument_opinion !== 'static') {
          filter[argument[i].key] = argument[i].value
        }
      }
      processHandler(api_name, filter).then(response => {
        this.data = response.data
        this.status = response.status
        this.cache = response.headers.cache
        this.$message({
          message: "请求成功",
          type: "success"
        })
      }).catch(err => {
        this.response = err.data
        this.status = err.status
        this.$message({
          message: "请求失败",
          type: "error"
        })
      })
    },
    cacheRem: function (action) {
      let apiName = this.form.api_name
      let cache = this.form.cache.key
      switch (action) {
        case "remove_one":
          let argument = this.form.data.argument
          for (let i = 0; i < argument.length; i++) {
            cache = cache.replace("$." + argument[i].key, argument[i].value)
          }
          cache = apiName + "-" + cache
          break
        case "remove_many":
          cache = apiName
          break
        case "remove_all":
          cache = "*"
          break
      }
      cacheRemHandler(action, cache)
    },
    loadArgument: function () {
      this.argument = []
      let argument = this.form.data.argument
      for (let i = 0; i < argument.length; i++) {
        if (argument[i].argument_opinion !== 'static') {
          this.argument.push(argument[i])
        }
      }
    }
  },
}
</script>

<style scoped>

</style>